import 'dart:async';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_zoom_drawer/config.dart';
import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';

import 'package:get/get.dart';
import 'package:pet/app/models/clients.dart';
import 'package:pet/app/websocket_controller.dart';
import 'package:pet/app/widgets/NoShadowScrollBehavior.dart';
import 'package:pet/app/widgets/breathe.dart';
import 'package:pet/app/widgets/custom_avatar.dart';
import 'package:pet/app/widgets/loading.dart';
import 'package:pet/app/widgets/menu.dart';

import '../../../contants/my_colors.dart';
import '../../../helper.dart';
import '../../../routes/app_pages.dart';
import '../controllers/clients_controller.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class ClientsView extends GetView<ClientsController> {
  const ClientsView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    controller.getClients();
    return ZoomDrawer(
      menuBackgroundColor: Colors.black,
      menuScreenOverlayColor: Colors.black,
      mainScreenScale: 0.3,
      controller: controller.zoomDrawerController,
      borderRadius: 12.0,
      showShadow: true,
      angle: -10.0,
      drawerShadowsBackgroundColor: Color.fromARGB(255, 97, 78, 173),
      slideWidth: Get.width * 0.55,
      menuScreen: const Menu(),
      mainScreen: MainScreen(controller: controller),
    );
  }
}

class MainScreen extends StatelessWidget {
  const MainScreen({
    super.key,
    required this.controller,
  });

  final ClientsController controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '对话中',
          style: TextStyle(fontSize: 16, color: Colors.white),
        ),
        backgroundColor: MyColors.secondaryDark,
        centerTitle: true,
        toolbarHeight: 50,
        elevation: 1,
        leading: IconButton(
          icon: const Icon(
            Icons.menu,
            color: Colors.white,
          ),
          onPressed: () => controller.zoomDrawerController.toggle!(),
        ),
        actions: const [Breathe()],
      ),
      backgroundColor: MyColors.dark,
      body: GetBuilder<WebsocketController>(
        init: WebsocketController(),
        autoRemove: false,
        builder: (controller) {
          return AnimatedSwitcher(
            duration: const Duration(seconds: 3),
            child: Stack(
              children: [
                !controller.isConnect ? Loading() : SizedBox(),
                // 客户列表
                ListView.builder(
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  itemCount: controller.clients.length,
                  itemBuilder: (BuildContext context, int index) {
                    String itemKey = controller.clients.keys.elementAt(index);

                    Clients client = controller.clients[itemKey]!;

                    return Slidable(
                      key: const ValueKey(0),
                      endActionPane: ActionPane(
                        motion: const ScrollMotion(),
                        children: [
                          SlidableAction(
                            onPressed: (BuildContext context) {
                              controller.closeConversion(
                                  client.id, client.sendId);
                            },
                            flex: 1,
                            backgroundColor: MyColors.error,
                            foregroundColor: Colors.white,
                            icon: Icons.delete_forever,
                            label: '结束对话',
                          ),
                        ],
                      ),
                      child: GestureDetector(
                        onTap: () {
                          Get.toNamed(Routes.CHAT, arguments: {
                            "id": client.id,
                            "sendId": client.sendId,
                            "nickname": client.sendNickname,
                            "avatar": client.sendHeadPortrait,
                            "type": "online"
                          });
                        },
                        child: Row(
                          children: [
                            Container(
                              width: Get.width,
                              decoration: const BoxDecoration(
                                border: Border(
                                  bottom: BorderSide(color: Colors.white),
                                ),
                              ),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Row(
                                    children: [
                                      Container(
                                        padding: const EdgeInsets.only(
                                          top: 6,
                                          bottom: 6,
                                          left: 6,
                                          right: 6,
                                        ),
                                        child: Stack(
                                          children: [
                                            CustomAvatar(
                                              avatar: client.sendHeadPortrait,
                                            ),
                                            client.unread != 0
                                                ? Positioned(
                                                    top: 4,
                                                    right: 0,
                                                    child: Container(
                                                      height: 16,
                                                      width: 16,
                                                      decoration:
                                                          BoxDecoration(
                                                        color: const Color
                                                                .fromARGB(
                                                            255, 0, 0, 0),
                                                        borderRadius:
                                                            const BorderRadius
                                                                .all(
                                                          Radius.circular(60),
                                                        ),
                                                        border: Border.all(
                                                          color: Colors.white,
                                                        ),
                                                      ),
                                                      child: Center(
                                                        child: Text(
                                                          client.unread
                                                              .toString(),
                                                          style:
                                                              const TextStyle(
                                                            color:
                                                                Colors.white,
                                                            fontSize: 10,
                                                          ),
                                                        ),
                                                      ),
                                                    ),
                                                  )
                                                : Container(),
                                          ],
                                        ),
                                      ),
                                      Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Text(
                                            client.sendNickname,
                                            style: const TextStyle(
                                              color: Colors.white,
                                            ),
                                          ),
                                          const SizedBox(
                                            height: 10,
                                          ),
                                          SizedBox(
                                            width: 100,
                                            child: Text(
                                              client.latestText,
                                              maxLines: 1,
                                              overflow: TextOverflow.ellipsis,
                                              style: const TextStyle(
                                                color: Colors.white,
                                                fontSize: 14,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                  Column(
                                    children: [
                                      Container(
                                        margin: const EdgeInsets.all(20),
                                        child: Text(
                                          formatTimestamp(
                                              int.parse(client.updatedAt)),
                                          style: const TextStyle(
                                            color: Colors.white,
                                          ),
                                        ),
                                      ),
                                    ],
                                  )
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
